<template>
  <h2>Vue3中的响应式</h2>
  <p>用户姓名:{{user.name}}</p>
  <p>用户年龄:{{user.age}}</p>
  <p>用户住址:{{user.address}}</p>
  <p>用户爱好:{{user.hobby}}</p>
  <button @click="add">添加地址</button>
  <button @click="delAge">删除年龄</button>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'Demo',
  setup() {
    let user = reactive({
      name: '陈永态',
      age: 26,
      hobby: ['吃', '喝', '嫖', '赌']
    });

    let add = () => {
      user.address = '西安';
      user.hobby[1] = '黄';
    };

    let delAge = () => {
      delete user.age;
    };

    return {
      user,
      add,
      delAge
    };
  }
};
</script>

<style>
</style>